<template>
    <a-menu :mode="mode" :theme="theme" :inline-collapsed="collapsed">
      <template v-for="item in menus">
        <a-menu-item v-if="!item.children" :key="item.name">
          <a-icon v-if="item.meta.icon" :type="item.meta.icon" />
          <span>{{ item.meta.title }}</span>
          <router-link v-if="item.path" :to="{path:''+item.path+''}"></router-link>
        </a-menu-item>
        <sub-menu v-else :key="item.name" :menu-info="item" />
      </template>
      
    </a-menu>
</template>

<script>

import { Menu } from 'ant-design-vue';
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.name" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <a-icon v-if="menuInfo.meta.icon" :type="menuInfo.meta.icon" />
          <span>{{ menuInfo.meta.title }}</span>
          <router-link v-if="menuInfo.path" :to="{path:''+menuInfo.path+''}"></router-link>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.name">
            <a-icon v-if="item.meta.icon" :type="item.meta.icon" />
            <span>{{ item.meta.title }}</span>
            <router-link v-if="item.path" :to="{path:''+item.path+''}"></router-link>
          </a-menu-item>
          <sub-menu v-else :key="item.name" :menu-info="item" />
        </template>
      </a-sub-menu>
    `,
  name: 'SubMenu',
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
};


export default {
    name:'GlobalSider',
    components:{
        'sub-menu': SubMenu,
    },
    created () {
      
    },
    props:{
        menus:{
            type:Array,
            default:() => ([]),
        },
        theme:{
            type:String,
            default:'dark'
        },
        mode:{
            type:String,
            default:'inline'
        },
        collapsed:{
            type:Boolean,
            default:false
        }
    }
}
</script>